
<template>
  <div class="d-flex justify-content-center align-items-center h-100 w-100 bg-login">
    <a-affix class="position-absolute adjust-language-position">
      <a-button icon="global"
                @click="setLanguage">
        {{$t("i18n_login_switch_language_label")}}
      </a-button>
    </a-affix>
    <a-form @submit="handleSubmit"
            :autoFormCreate="(form)=>{this.form = form}"
            class="login-form">
      <a-form-item hasFeedback
                   validateStatus="validating"
                   fieldDecoratorId="username"
                   :fieldDecoratorOptions="{ rules: [ { required: true, message: $t('i18n_login_user_name_valid_label') } ]}">
        <span slot="help"
              class="text-secondary">
          {{$t('i18n_login_validing_label')}}
        </span>
        <a-input :placeholder="$t('i18n_login_user_name_label')">
          <a-icon type="user"
                  slot="prefix" />
        </a-input>
      </a-form-item>
      <a-form-item fieldDecoratorId="password"
                   :fieldDecoratorOptions="{ rules: [ { required: true, message: $t('i18n_login_user_password_valid_label') } ] }">
        <a-input type="password"
                 :placeholder="$t('i18n_login_user_password_label' )">
          <a-icon slot="prefix"
                  type="lock" />
        </a-input>
      </a-form-item>
      <a-form-item fieldDecoratorId="remember"
                   :fieldDecoratorOptions="{ valuePropName: 'checked', initialValue: true }"
                   class="clearfix">
        <a-checkbox class="text-secondary">
          {{$t("i18n_login_remember_me_label")}}
        </a-checkbox>
        <a class="float-right"
           href="#">
          {{$t("i18n_login_forgot_password_label")}}
        </a>
        <a-button type="primary"
                  htmlType="submit"
                  class="w-100">
          {{$t("i18n_login_label")}}
        </a-button>
        <span class="text-secondary">
          {{$t("i18n_login_or_label")}}
        </span>
        <router-link to="/register"
                     class="ml-1">
          {{$t("i18n_login_register_now_label")}}
        </router-link>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
/**
 * @description Login Component
 */

import Api from '@api'
import { notification } from 'vue-antd-ui'
export default {
  data() {
    return {}
  },
  methods: {
    setLanguage() {
      const curLan = localStorage.getItem('vi-lan')
      localStorage.setItem('vi-lan', curLan === 'en' ? 'zh' : 'en')
      // FIXME: will do smooth reload
      window.location.reload()
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          // Check validation
          let param = {}
          param.userName = values.userName
          param.password = values.password
          Api.post('login', param, true).then(res => {
            // Login success
            notification.success({
              message: this.$t('i18n_common_success'),
              description: JSON.stringify(res)
            })
            sessionStorage.setItem('vi-login', true)
            this.$router.push('/dashboard')
          })
        }
      })
    }
  },
  created() {
    // Handle has logined just to dashboard
    sessionStorage.getItem('vi-login') && this.$router.push('/dashboard')
  }
}
</script>
